<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="column in tableColumns" :key="column.key">{{ column.label }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in tableData" :key="item.id">
                    <td v-for="column in tableColumns" :key="column.key">
                        <template v-if="column.key === 'qrcodeUrl'">
                            <qrcode-vue :value="item[column.key]" :size="100" level="H" />
                        </template>
                        <template v-else>
                            {{ item[column.key] }}
                        </template>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
  
<script setup lang='ts'>
import { defineProps } from 'vue';
import QrcodeVue from 'qrcode.vue'

defineProps(['tableColumns', 'tableData'])


</script>

<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ccc;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>
  